<template>
  <view class="content">
    <map class="map" id="map1" ref="map1" 
      :controls="controls" :scale="scale" :longitude="location.longitude"
      :latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
      :show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
      :enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
      :enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
      :include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
      @callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"/>
    <scroll-view class="scrollview" scroll-y="true">
      <view class="buttons">
      <!-- #ifndef MP-JD -->
      <button class="button" @click="changeScale">缩放</button>
      <!-- #endif -->
      <button class="button" @click="addMarkers">addMarkers</button>
      <button class="button" @click="addPolyline">addPolyline</button>
      <!-- #ifndef MP-JD -->
      <button class="button" @click="addPolygons">addPolygons</button>
      <!-- #endif -->
      <button class="button" @click="addCircles">addCircles</button>
      <button class="button" @click="includePoint">includePoints</button>
      <button class="button" @click="handleGetCenterLocation">getCenterLocation</button>
      <button class="button" @click="handleGetRegion">getRegion</button>
      <!-- #ifndef MP-JD -->
      <button class="button" @click="handleTranslateMarker">translateMarker</button>
      <!-- #endif -->
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import testData from "./data.js"
  export default {
    data() {
      return {
        location: {
          longitude: 116.3974770000,
          latitude: 39.9086920000
        },
        controls: [{
          id: 1,
          position: {
            left: 5,
            top: 180,
            width: 30,
            height: 30
          },
          iconPath: '/static/logo.png',
          clickable: true
        }],
        showLocation: false,
        scale: 13,
        showCompass: true,
        enable3D: true,
        enableOverlooking: true,
        enableZoom: true,
        enableScroll: true,
        enableRotate: true,
        enableSatellite: false,
        enableTraffic: false,
        polyline: [],
        markers: [],
        polygons: [],
        circles: [],
        includePoints: [],
        rotate: 0,
        skew: 0
      }
    },
    onLoad() {},
    onReady() {
      this.map = uni.createMapContext("map1", this);
    },
    methods: {
      // #ifndef MP-JD
      changeScale() {
        this.scale = this.scale == 9 ? 15 : 9;
      },
      // #endif
      enableThreeD(e) {
        this.enable3D = e.detail.value;
      },
      changeShowCompass(e) {
        this.showCompass = e.detail.value;
      },
      changeEnableOverlooking(e) {
        this.enableOverlooking = e.detail.value;
      },
      changeEnableZoom(e) {
        this.enableZoom = e.detail.value;
      },
      changeEnableScroll(e) {
        this.enableScroll = e.detail.value;
      },
      changeEnableRotate(e) {
        this.enableRotate = e.detail.value;
      },
      changeEnableSatellite(e) {
        this.enableSatellite = e.detail.value;
      },
      changeEnableTraffic(e) {
        this.enableTraffic = e.detail.value;
      },
      addMarkers() {
        this.markers = testData.testMarkers;
      },
      addPolyline() {
        this.polyline = testData.testPolyline;
      },
      // #ifndef MP-JD
      addPolygons() {
        this.polygons = testData.testPolygons;
      },
      // #endif
      addCircles() {
        this.circles = testData.testCircles;
      },
      includePoint() {
        this.includePoints = testData.testIncludePoints;
      },
      handleGetCenterLocation() {
        this.map.getCenterLocation({
          success: ret => {
            console.log(JSON.stringify(ret));
            uni.showModal({
              content: JSON.stringify(ret)
            })
          }
        })
      },
      handleGetRegion() {
        this.map.getRegion({
          success: ret => {
            console.log(JSON.stringify(ret));
            uni.showModal({
              content: JSON.stringify(ret)
            })
          }
        })
      },
      // #ifndef MP-JD
      handleTranslateMarker() {
        this.map.translateMarker({
          markerId: 1,
          destination: {
            latitude: 39.989631,
            longitude: 116.481018
          },
          duration: 2000
        }, ret => {
          console.log(JSON.stringify(ret));
          uni.showModal({
            content: JSON.stringify(ret)
          })
        });
      },
      // #endif
      maptap(e) {
        uni.showModal({
          content: JSON.stringify(e)
        })
      },
      onmarkertap(e) {
        uni.showModal({
          content: JSON.stringify(e)
        })
      },
      oncontroltap(e) {
        uni.showModal({
          content: JSON.stringify(e)
        })
      },
      oncallouttap(e) {
        uni.showModal({
          content: JSON.stringify(e)
        })
      },
      onupdated(e) {
        console.log(JSON.stringify(e))
      },
      onregionchange(e) {
        console.log(JSON.stringify(e));
      },
      onpoitap(e) {
        uni.showModal({
          content: JSON.stringify(e)
        })
      }
    }
  }
</script>

<style>
  .content {
    flex: 1;
  }

  .map {
    width: 750rpx;
    /* #ifdef H5 */
    width: 100%;
    /* #endif */
    height: 360px;
    background-color: #f0f0f0;
  }

  .scrollview {
    /* #ifdef H5 */
    /* margin-top: 8px; */
    /* #endif */
    flex: 1;
    /* padding: 10px; */
  }

  .list-item {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 5px 0px;
  }

  .list-text {
    flex: 1;
  }
  
  .buttons{
    padding: 15px;
  }

  .button {
    margin-top: 8px;
    margin-bottom: 8px;
    width: 100%;
    line-height: 2.5em;
  }
</style>